<template>
	<!-- 普通弹窗 -->
	<uni-popup class="infoPopup" ref="popup" is-mask-click>
		<view class="content">
			<view class="head">
				<text>壁纸评分</text>
				<uni-icons class="close-icon" @click="close" type="closeempty" size="18"></uni-icons>
			</view>
			<view class="rate">
				<uni-rate v-model="rate" size="30" />
				<text>{{rate}}分</text>
			</view>
			<view class="comfirm">
				<view class="comfirm-buttom" @click="comfirm">确认评分</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		defineExpose
	} from 'vue' // 引入defineExpose
	const popup = ref()
	let rate = ref(3.5)

	function open() {
		popup.value.open('center')
	}

	function close() {
		popup.value.close()
	}

	function comfirm() {
		// 更新数据
		close()
	}

	defineExpose({
		open,
		rate
	})
</script>

<style lang="scss" scoped>
	.infoPopup {
		.content {
			background-color: #fff;
			border-radius: 30rpx;
			box-sizing: border-box;

			.head {
				position: relative;
				text-align: center;
				padding: 30rpx 0;
				font-size: 25rpx;
				color: $text-font-color-2;

				:deep() {
					.close-icon {
						position: absolute;
						right: 20rpx;
						color: $text-font-color-2 !important;
					}
				}
			}

			.rate {
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.comfirm {
				display: flex;
				justify-content: center;
				padding: 30rpx 0;

				.comfirm-buttom {
					width: fit-content;
					height: fit-content;
					padding: 10rpx 30rpx;
					border: 1rpx solid $text-font-color-4;
					border-radius: 15rpx;
					font-size: 22rpx;
					color: $text-font-color-3;
				}
			}
		}
	}
</style>